<template>
    <div class="chat">
        <div class="select-type">
            <el-radio-group v-model="type" @change="changeType">
                <el-radio :label="0">AI 生成</el-radio>
                <el-radio :label="1">上传音频</el-radio>
            </el-radio-group>
        </div>
        <div v-if="type == 0" class="input-txt">
            <span>写文案</span>
            <div class="content">
                <el-input
                    v-model="text"
                    maxlength="5000"
                    placeholder="请输入话术文案"
                    show-word-limit
                    type="textarea"
                />
                <el-button  style="margin-top: 15px;  color: #25212B;" color="#BC81FC" type="primary" @click="btnClick">用AI生产话术</el-button>
            </div>
        </div>
        <div v-else class="add-file">
            <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            :limit="1"
            :auto-upload="false"
            :on-exceed="onExceed"
        >
            <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
            <template #tip>
            <div class="el-upload__tip">
                <!-- jpg/png files with a size less than 500kb -->
            </div>
            </template>
        </el-upload>
        <span class="sub">支持格式：wav、mp3、m4a格式；50M以内</span>
        </div>
        <Dialog 
        :show="showDialog" 
        :title="'AI生成文案(请复制生成的文案，粘贴回去)'" 
        :width="880"
        :isCloseTip="false" 
        :is-custom-footer="false"
        @on-close="showDialog = false;"
        @on-sure-click="showDialog = false;"
    >
        <template #content>
          <div class="chat-content">
            <div class="chat-list">
                <div class="chat-item" v-for="item in chatList"> 
                    
                    <el-avatar
                    v-if="item.icon !== 'user'"
                      :size="36"
                      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    />
                    <el-avatar v-else :size="36"> user </el-avatar>
                    <div class="chat-message">
                        {{ item.message }}
                    </div>
                </div>
            </div>

            <div class="input-box">
                <el-input
                    class="input"
                    v-model="content"
                    :rows="6"
                    type="textarea"
                    placeholder="请输入你想说的话"
                    maxlength="10000"
                    show-word-limit
                    />
                <div class="icon" @click="sendClick">
                    <telegram style="margin-left: -4px;"  theme="filled" size="20" fill="#fff"/>
                </div>
          </div>
          </div>
        </template>
    </Dialog>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import { Plus } from '@element-plus/icons-vue';
const type = ref<number>(0)
const content = ref<string>('')
import { genFileId, type UploadInstance, type UploadProps, type UploadRawFile, type UploadUserFile } from 'element-plus'
import Dialog from '@/components/dialog/dialog.vue'
import {Telegram} from '@icon-park/vue-next'
import {getAiChat} from '@/service/video'
import {to} from 'await-to-js'
const text = ref<string>('')
const fileList = ref<UploadUserFile[]>([])
const chatList = ref<any[]>([])
const index = ref<number>(0)
const showDialog = ref<boolean>(false)
// 暴露变量
defineExpose({
    text,
    fileList,
})
const emit = defineEmits(['select'])
const btnClick = () => {
    showDialog.value = true;
}
const onExceed: UploadProps['onExceed'] = (files) => {
  fileList.value = [];
  const file = files[0] as UploadRawFile
  fileList.value.push(file);
}

const getAiChatMessage = async (value: string): Promise<void> => {
   const [err, res] = await to(getAiChat({query: value}));
   if(err || !res.success) {
    return;
   }
   chatList.value[index.value].message = res.result
} 

const sendClick = () => {
    chatList.value.push({
        icon: 'user',
        message: content.value
    })
    index.value = chatList.value.length;
    chatList.value.push({
        icon: 'Ai',
        message: "消息生成中..."
    })
    let value = content.value;
    setTimeout(() => {
        getAiChatMessage(value)
    })
    content.value = '';
}
const changeType = (e: number) => {
    emit('select', e)
}
</script>

<style lang="css" scoped>
.chat {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 48vh;
}
:deep(.el-radio__input.is-checked+.el-radio__label) {
    color: #fff;
}
.input-txt {
    width: 92%;
    color: #FFF;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.input-txt > span {
    display: flex;
    width: 60px;
    font-size: 16px;
    margin-right: 10px;
}
.content {
    width: 90%;
}
.add-file {
    color: #fff;
    margin-top: 40px;
    text-align: center;
}
.avatar-uploader-icon {
  font-size: 28px;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 1px dashed #E3E3E3;
}
.chat-content {
    height: 600px;
    overflow: auto;
    position: relative;
    /* padding-bottom: 20px; */
}
.chat-list {
    height: 480px;
    overflow: auto;
    padding-bottom: 20px;
    /* background-color: skyblue; */
}
.chat-item {
    display: flex;
    margin-bottom: 20px;
}
.chat-item .chat-message {
    /* width: ; */
    flex: 1;
    color: #fff;
}
.chat-item :deep(.el-avatar--circle){
    /* width: 30px; */
    /* height: 40px; */
    margin-right: 10px;
}
.sub{
    font-size: 14px;
    color: #7F7F7F;
}
.input-box {
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    width: 100%;
    z-index: 10;
}
.input-box :deep(.el-textarea__inner) {
    border: 2px solid #C28BE2;
    border-radius: 10px;
    /* padding-right: 40px; */
}
.input-box :deep(.el-textarea .el-input__count) {
    position: absolute;
    right: 60px;
    z-index: 99;
    bottom: 20px;
}
:deep(.el-textarea__inner::-webkit-scrollbar) {
  display: none;
}
.input-box .icon {
    display: none;
    position: absolute;
    right: 10px;
    z-index: 99;
    bottom: 10px;
    width: 40px;
    height: 40px;
    background-color: #8252B3;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
:deep(.content  .el-textarea__inner) {
    height: 36vh;
}
:deep(.input-box  .el-textarea__inner) {
    height: auto;
}

.chat-item .chat-message {
    margin-top: 10px;
    margin-left: 10px;
    line-height: 20px;
}
:deep(.el-upload__tip,.el-upload-list .el-upload-list--text) {
    color: #fff;
}
:deep(.el-upload-list__item ){
    width: 300px;
    height: 40px;
    margin-bottom: 10px;
    line-height: 40px;
    color: #fff;
}
:deep(.el-upload-list__item:hover ){
    background: #8252B3;
}
:deep(.el-upload-list__item-file-name, .el-icon) {
    color: #fff;
}
.input-txt > .btn {
    background: #BC81FC;
    border: 1px solid #BC81FC;
   
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 4px; /* 设置滚动条的宽度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
   display: none;
   background-color: #f1f1f1; /* 设置滚动条轨道的背景色 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #DDDEE0; /* 设置滚动条滑块的颜色 */
  border-radius: 6px; /* 设置滚动条滑块的圆角 */
}

/* 当鼠标悬停在滚动条上时，滑块的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #B2B2B2; /* 设置鼠标悬停时滚动条滑块的颜色 */
}
</style>